<style scoped lang="scss">

</style>


<template>
  <div class="app-container">
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称">
              <el-input style="width: 100%" v-model="searchObj.roleName" placeHolder="角色名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData"></el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetData"></el-button>
        </el-row>
      </el-form>
    </div>
    <div class="tools-div" >
      <el-button type="success" icon="el-icon-plus" size="mini" @click="add(null)">
        添加
      </el-button>

      <el-button type="success" icon="el-icon-plus" size="mini" @click="deleteRole">
        批量删除
      </el-button>
      <el-dialog title="添加/修改" :visible.sync="dialogFormVisible">
        <el-form :model="roleObject">
          <el-form-item label="角色名称" :label-width="formLabelWidth">
            <el-input v-model="roleObject.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色编码" :label-width="formLabelWidth">
            <el-input v-model="roleObject.roleCode"  autocomplete="off" >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editRole">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px"
      @selection-change="selectionchange"
    >
      <el-table-column type="selection" />
      <el-table-column
        label="序号"
        width="70"
        align="center"
      >
        <template slot-scope="scope">
          {{(page-1)*limit+scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称"/>
      <el-table-column prop="roleCode" label="角色编码"/>
      <el-table-column prop="createTime" label="创建时间" width="160"/>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button title="修改" type="primary" icon="el-icon-edit" size="mini" @click="add(scope.row)"></el-button>
          <el-button title="删除" type="danger" icon="el-icon-delete" size="mini"  @click="deleteDataById(scope.row.id)"></el-button>
          <el-button title="分配权限" type="warning" icon="el-icon-baseball" size="mini" @click="showAssignAuth(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: center"
      layout="total,prev,pager,next,jumper"
      @current-change="fetchData"
    />
  </div>

</template>

<script  lang="js">
import api from '@/api/role/role'
export default {
  data(){
    return{
      list:[],
      total:0,
      page:1,
      limit:3,
      searchObj:{},
      dialogFormVisible:false,
      roleObject:{},
      selectValueData:[]



    }
  },
  created() {
    this.fetchData()
  },
  methods:{
    selectionchange(selectValue){
      this.selectValueData=selectValue
    },
    add(row){
      this.dialogFormVisible=true
      if (row!=null){
        this.roleObject=row
      }else{
        this.roleObject={}
      }
    },
    fetchData(page=1){
      this.page =page
      api.getPageList(this.page,this.limit,this.searchObj).then( response=>{
        this.list = response.data.records
        this.total =response.data.total

      })
    },
    resetData(){
      this.searchObj={}
      this.fetchData()
    },
    deleteDataById(id){

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
          api.deleteByID(id).then(response=> {
            this.$message({
              type:'success',
              message:'删除成功'
            })
            this.fetchData()
          })

        }
      )
    },
    editRole(){

      if (this.roleObject.id==null){
        api.addRole(this.roleObject).then(response=> {
          this.$message({
            type:'success',
            message:'添加成功'
          })
          this.dialogFormVisible=false
          this.fetchData()
        })
      }else{
        api.updateRole(this.roleObject).then(response=> {
          this.$message({
            type:'success',
            message:'更新成功'
          })
          this.dialogFormVisible=false
          this.fetchData()
        })
      }
    },


    deleteRole(){
      if (this.selectValueData.length==0){
        this.$message.warning("请选择你要删除的角色")

      }else {
        this.$confirm("此操作为永久删除,是否继续","提示",{
          confirmButtonText: "确认",
          cancelButtonText:"取消",
          type :"warning"
        }).then(()=>{
            let ids=[]
            for (let i = 0; i < this.selectValueData.length; i++) {
              let obj =this.selectValueData[i]
              let id = obj.id;
              ids.push(id)
            }
            api.batchRemove(ids).then(response=>{
                this.$message({
                  type:"success",
                  message:"删除成功"
                })
                this.fetchData()

              }
            )
          }

        )

      }
    },
    showAssignAuth(row) {
      this.$router.push('/system/assignAuth?id='+row.id+'&roleName='+row.roleName);
    }

  }
}

</script>






